<template>
  <div class="common-layout">
    <el-container>
      <el-header style="border-style: groove; height: 400px">
        <table>
          <tr>
            <td style="width: 300px">
              <img
                v-if="Produt2.images"
                style="height: 250px; width: 250px"
                :src="Produt2.images"
              />
            </td>
            <td>
              <table style="width: 700px">
                <tr style="height: 50px">
                  <td style="font-size: 30px; font-weight: bold">
                    {{ Produt2.productName }}
                  </td>
                </tr>
                <tr style="height: 50px">
                  <td style="width: 300px">批次编号：{{ Produt2.batchId }}</td>
                  <td style="width: 300px">保质期：{{ Produt2.keepSafe }}天</td>
                </tr>
                <tr style="height: 50px">
                  <td>生产许可证号：{{ Produt2.permission }}</td>
                  <td>生产企业：{{ Produt2.firmName }}</td>
                </tr>
                <tr style="height: 50px">
                  <td style="font-size: 15px; font-weight: bold">
                    产品检验报告
                  </td>
                </tr>
                <tr style="height: 50px">
                  <el-upload
                    v-model:file-list="fileList"
                    action="https://localhost:44372/api/rabbit/UploadImages"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleAvatarSuccess2()"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>

                  <el-dialog v-model="dialogVisible6">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </tr>
              </table>
            </td>
            <td>
              <el-button type="info" plain @click="SetFarmingInformation5()"
                >修改基本信息</el-button
              >
              <el-button type="info" plain>导出溯源码</el-button>
            </td>
          </tr>
        </table>
        <el-dialog
          v-model="dialogVisible1"
          title="修改页面"
          width="500"
          :before-close="handleClose"
        >
          <span>
            <el-form-item label="商品名称" width="140">
              <el-select
                v-model="Produt2.productClassId"
                placeholder="请选择商品名称"
              >
                <el-option
                  v-for="items in Shopinfo"
                  :label="items.productName"
                  :value="items.productClassId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="生产批次" width="140">
              <el-input v-model="Produt2.batchId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="保质期（天）" width="140">
              <el-input v-model="Produt2.keepSafe" autocomplete="off" />
            </el-form-item>
            <el-form-item label="生产许可证号" width="140">
              <el-input v-model="Produt2.permission" autocomplete="off" />
            </el-form-item>
            <el-form-item label="生产企业" width="140">
              <el-input v-model="Produt2.firmName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="封面图" width="140">
              <el-upload
                class="avatar-uploader"
                action="https://localhost:44372/api/rabbit/UploadImages"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
              >
                <img
                  style="height: 150px; width: 150px"
                  v-if="Produt2.images"
                  :src="Produt2.images"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取消</el-button>
              <el-button type="primary" @click="updateProduct()">
                修改
              </el-button>
            </div>
          </template>
        </el-dialog>
        <el-dialog title="商品溯源码" width="400" draggable>
          <div>
            <el-image
              alt="二维码"
              style="width: 300px; height: 300px; margin-left: 30px"
            ></el-image>
          </div>
        </el-dialog>
      </el-header>
      <el-main style="border-style: groove; margin-top: 20px; height: 2100px">
        <el-tabs v-model="activeTab" @tab-click="PlateInformationButton()">
          <el-tab-pane label="养殖信息（5/5）">
            <div style="margin-left: 30px">
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >养殖信息</span
                >
                <el-button
                  type="info"
                  style="margin-left: 10px"
                  @click="SetFarmingInformation()"
                  :before-close="handleClose"
                  >设置</el-button
                >
                <!-- 设置养殖信息弹出框 -->
                <el-dialog
                  title="养殖信息"
                  v-model="vis1"
                  width="500"
                  draggable
                >
                  <el-form style="max-width: 600px" status-icon>
                    <el-form-item label="品种: ">
                      <el-input placeholder="请输入" v-model="Farm.typeName" />
                    </el-form-item>
                    <el-form-item label="来源: ">
                      <el-input placeholder="请输入" v-model="Farm.source" />
                    </el-form-item>
                    <el-form-item label="饲养天数: ">
                      <el-input placeholder="请输入" v-model="Farm.feedDays" />
                    </el-form-item>
                    <el-form-item label="饲养品牌: " prop="feedBrand">
                      <el-input placeholder="请输入" v-model="Farm.feedBrand" />
                    </el-form-item>
                    <el-form-item label="饲养负责人: " prop="principal">
                      <el-input
                        placeholder="请输入"
                        v-model="Farm.feedPerson"
                      />
                    </el-form-item>
                    <el-form-item label="出栏日期: " required>
                      <el-form-item>
                        <el-date-picker
                          type="date"
                          aria-label="请选择出栏日期"
                          placeholder="请选择出栏日期"
                          style="width: 100%"
                          v-model="Farm.outboundTime"
                        />
                      </el-form-item>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="AddFram()"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">品种：{{ Farm.typeName }}</td>
                    <td style="width: 300px">来源：{{ Farm.source }}</td>
                  </tr>
                  <tr style="height: 50px">
                    <td>饲养天数：{{ Farm.feedDays }} 天</td>
                    <td>饲料品牌：{{ Farm.feedBrand }}</td>
                  </tr>
                  <tr style="height: 50px">
                    <td>饲养负责人：{{ Farm.feedPerson }}</td>
                    <td>出栏日期：{{ Farm.outboundTime }}</td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >保健信息</span
                >
                <el-button
                  type="info"
                  plain
                  style="margin-left: 10px"
                  @click="addRow()"
                  >新增行</el-button
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <el-table
                  :data="CustomHealthInfo"
                  style="width: 610px; margin-top: 10px"
                  :cell-style="{ 'text-align': 'center' }"
                  :header-cell-style="{
                    'text-align': 'center',
                    'background-color': 'rgb(239 242 245)',
                  }"
                >
                  <el-table-column
                    fixed
                    prop="feedingDays"
                    width="150"
                    label="饲养天数"
                  >
                    <template v-slot="scoped">
                      <template v-if="scoped.row.editMode">
                        <el-input v-model="scoped.row.feedDays" />
                      </template>
                      <template v-else>{{ scoped.row.feedDays }}</template>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="healthType"
                    label="保健方式"
                    width="120"
                  >
                    <template v-slot="scoped">
                      <template v-if="scoped.row.editMode">
                        <el-input v-model="scoped.row.immuneApproach" />
                      </template>
                      <template v-else>
                        {{ scoped.row.immuneApproach }}
                      </template>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="healthMethod"
                    label="保健方法"
                    width="120"
                  >
                    <template v-slot="scoped">
                      <template v-if="scoped.row.editMode">
                        <el-input v-model="scoped.row.immuneMethod" />
                      </template>
                      <template v-else>
                        {{ scoped.row.immuneMethod }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作列" width="220">
                    <template v-slot="scoped">
                      <template v-if="scoped.row.editMode">
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click="saveRow(scoped.row)"
                          >保存</el-button
                        >
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click="cancelEdit(scoped.row)"
                          >取消</el-button
                        >
                      </template>
                      <template v-else>
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click="editRow(scoped.row)"
                          >修改</el-button
                        >
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click="deleteRow(scoped.row)"
                          >删除</el-button
                        >
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >动检证</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div
                  style="width: 150px; height: 150px; background-color: bisque"
                ></div>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业信息</span
                >
                <el-button
                  type="info"
                  @click="SetFarmingInformation1()"
                  plain
                  style="margin-left: 10px"
                  >设置</el-button
                >
                <!-- 设置养殖企业信息弹出框 -->
                <el-dialog
                  title="企业信息"
                  width="500"
                  v-model="vis2"
                  draggable
                >
                  <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    label-width="auto"
                    class="demo-ruleForm"
                    status-icon
                  >
                    <el-form-item label="养殖场: " prop="farm">
                      <el-input placeholder="请输入" v-model="Firm.farm" />
                    </el-form-item>
                    <el-form-item label="负责人: " prop="principal">
                      <el-input placeholder="请输入" v-model="Firm.principal" />
                    </el-form-item>
                    <el-form-item label="存栏数量(只): " prop="stock">
                      <el-input placeholder="请输入" v-model="Firm.stock" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="AddFiam()"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">养殖场： {{ Firm.farm }}</td>
                    <td style="width: 300px">负责人：{{ Firm.principal }}</td>
                  </tr>
                  <tr>
                    <td>
                      存栏数量：{{ Firm.stock }}
                      只
                    </td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业照片</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div>
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                  &nbsp;
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="屠宰信息（5/5）" name="slaughterInfo">
            <div style="margin-left: 30px">
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >屠宰信息</span
                >
                <el-button
                  type="info"
                  plain
                  style="margin-left: 10px"
                  @click="SetFarmingInformation2()"
                  >设置</el-button
                >
                <el-dialog
                  title="屠宰信息"
                  v-model="vis3"
                  width="500"
                  draggable
                >
                  <el-form style="max-width: 600px" status-icon>
                    <el-form-item label="批次: ">
                      <el-input placeholder="请输入" disabled />
                    </el-form-item>
                    <el-form-item label="到厂均重: ">
                      <el-input placeholder="请输入" v-model="Kill.getWeight" />
                    </el-form-item>
                    <el-form-item label="到场日期: " required>
                      <el-form-item>
                        <el-date-picker
                          type="date"
                          aria-label="请选择出栏日期"
                          placeholder="请选择出栏日期"
                          style="width: 100%"
                          v-model="Kill.getTime"
                        />
                      </el-form-item>
                    </el-form-item>
                    <el-form-item label="屠宰日期: " required>
                      <el-form-item>
                        <el-date-picker
                          type="date"
                          aria-label="请选择出栏日期"
                          placeholder="请选择出栏日期"
                          style="width: 100%"
                          v-model="Kill.killTime"
                        />
                      </el-form-item>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="AddKill()"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">批次：{{ Kill.batchId }}</td>
                    <td style="width: 300px">
                      到厂均重：{{ Kill.getWeight }}
                      公斤
                    </td>
                  </tr>
                  <tr style="height: 50px">
                    <td>到厂时间：{{ Kill.getTime }}</td>
                    <td>屠宰时间：{{ Kill.killTime }}</td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >相关资质</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div style="height: 150px">
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                </div>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业信息</span
                >
                <el-button
                  type="info"
                  plain
                  style="margin-left: 10px"
                  @click="SetFarmingInformation3()"
                  >设置</el-button
                >
                <el-dialog
                  title="企业信息"
                  width="500"
                  v-model="vis4"
                  draggable
                >
                  <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    label-width="auto"
                    class="demo-ruleForm"
                    status-icon
                  >
                    <el-form-item label="公司名称: " prop="farm">
                      <el-input placeholder="请输入" v-model="Firm.firmName" />
                    </el-form-item>
                    <el-form-item label="成立时间: " required>
                      <el-form-item>
                        <el-date-picker
                          type="date"
                          aria-label="请选择出栏日期"
                          placeholder="请选择出栏日期"
                          style="width: 100%"
                          v-model="Firm.start"
                        />
                      </el-form-item>
                    </el-form-item>
                    <el-form-item label="公司地址: " prop="stock">
                      <el-input placeholder="请输入" v-model="Firm.address" />
                    </el-form-item>
                    <el-form-item label="公司简介: " prop="stock">
                      <el-input placeholder="请输入" v-model="Firm.intro" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="AddFiam()"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">公司名称：{{ Firm.firmName }}</td>
                    <td style="width: 300px">成立时间：{{ Firm.start }}</td>
                  </tr>
                  <tr>
                    <td :colspan="2">公司地址：{{ Firm.address }}</td>
                  </tr>
                  <tr>
                    <td :colspan="2" style="width: 1200px">
                      公司简介：{{ Firm.intro }}
                    </td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业照片</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div>
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                  &nbsp;
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="深加工信息（5/5）" name="deepprocessingInfo">
            <div style="margin-left: 30px">
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >深加工信息</span
                >
                <el-button
                  type="info"
                  plain
                  style="margin-left: 10px"
                  @click="SetFarmingInformation4()"
                  >设置</el-button
                >
                <el-dialog
                  title="企业信息"
                  width="500"
                  v-model="vis5"
                  draggable
                >
                  <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    label-width="auto"
                    class="demo-ruleForm"
                    status-icon
                  >
                    <el-form-item label="负责人: " prop="principal">
                      <el-input
                        placeholder="请输入"
                        v-model="supper.principal"
                      />
                    </el-form-item>
                    <el-form-item label="班组: " prop="team">
                      <el-input placeholder="请输入" v-model="supper.team" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="AddSpuuer()"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">班组：{{ supper.team }}组</td>
                    <td style="width: 300px">负责人：{{ supper.principal }}</td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >食品安全信息</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div>
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                </div>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >供应商信息</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table style="width: 100%; margin-left: 20px">
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px">
                        <span
                          style="
                            font-weight: bold;
                            color: rgb(5 117 230 / 80%);
                            font-size: 20px;
                          "
                          >|</span
                        >
                        原料</span
                      >
                      <el-button type="info" plain style="margin-left: 10px"
                        >设置</el-button
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-size: 15px"
                        >生产批次：{{ Produt2.batchId }}</span
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        >相关材料</span
                      >
                    </td>
                  </tr>
                  <hr style="margin-top: 10px; margin-bottom: 10px" />
                  <tr style="height: 30px">
                    <td>
                      <div>
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                        &nbsp;
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                      </div>
                    </td>
                  </tr>
                </table>
                <table style="width: 100%; margin-left: 20px">
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        ><span
                          style="
                            font-weight: bold;
                            color: rgb(5 117 230 / 80%);
                            font-size: 20px;
                          "
                          >|</span
                        >辅料</span
                      >
                      <el-button type="info" plain style="margin-left: 10px"
                        >设置</el-button
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-size: 15px"
                        >生产批次：{{ Produt2.batchId }}</span
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        >相关材料</span
                      >
                    </td>
                  </tr>
                  <hr style="margin-top: 10px; margin-bottom: 10px" />
                  <tr style="height: 30px">
                    <td>
                      <div>
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                        &nbsp;
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                      </div>
                    </td>
                  </tr>
                </table>
                <table style="width: 100%; margin-left: 20px">
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        ><span
                          style="
                            font-weight: bold;
                            color: rgb(5 117 230 / 80%);
                            font-size: 20px;
                          "
                          >|</span
                        >添加剂</span
                      >
                      <el-button type="info" plain style="margin-left: 10px"
                        >设置</el-button
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-size: 15px"
                        >生产批次：{{ Produt2.batchId }}</span
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        >相关材料</span
                      >
                    </td>
                  </tr>
                  <hr style="margin-top: 10px; margin-bottom: 10px" />
                  <tr style="height: 30px">
                    <td>
                      <div>
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                        &nbsp;
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                      </div>
                    </td>
                  </tr>
                </table>
                <table style="width: 100%; margin-left: 20px">
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        ><span
                          style="
                            font-weight: bold;
                            color: rgb(5 117 230 / 80%);
                            font-size: 20px;
                          "
                          >|</span
                        >包材</span
                      >
                      <el-button type="info" plain style="margin-left: 10px"
                        >设置</el-button
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-size: 15px"
                        >生产批次：{{ Produt2.batchId }}</span
                      >
                    </td>
                  </tr>
                  <tr style="height: 30px">
                    <td>
                      <span style="font-weight: bold; font-size: 15px"
                        >相关材料</span
                      >
                    </td>
                  </tr>
                  <hr style="margin-top: 10px; margin-bottom: 10px" />
                  <tr style="height: 30px">
                    <td>
                      <div>
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                        &nbsp;
                        <img
                          style="height: 150px; width: 150px"
                          :src="Produt2.images"
                        />
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业信息</span
                >
                <el-button type="info" plain style="margin-left: 10px"
                  >设置</el-button
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <table>
                  <tr style="height: 50px">
                    <td style="width: 300px">
                      公司名称：{{ Produt2.firmName }}
                    </td>
                    <td style="width: 300px">
                      生产许可证号：{{ Produt2.permission }}
                    </td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 30px">
                <span
                  style="
                    color: rgb(5 117 230 / 80%);
                    font-weight: bold;
                    font-size: 15px;
                  "
                  >企业照片</span
                >
                <hr style="margin-top: 10px; margin-bottom: 10px" />
                <div>
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                  &nbsp;
                  <img
                    style="height: 150px; width: 150px"
                    :src="Produt2.images"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
import { ElButton, ElTable, ElTableColumn, ElInput } from "element-plus";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();
const route = useRoute();
//养殖
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const vis1 = ref(false);
const vis2 = ref(false);
const vis3 = ref(false);
const vis4 = ref(false);
const vis5 = ref(false);
const vis6 = ref(false);
const dialogVisible2 = ref(false);
const SetFarmingInformation = () => {
  vis1.value = true;
};
const SetFarmingInformation5 = () => {
  dialogVisible1.value = true;
};
const SetFarmingInformation1 = () => {
  vis2.value = true;
};
const SetFarmingInformation3 = () => {
  vis4.value = true;
};
const SetFarmingInformation4 = () => {
  vis5.value = true;
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("你确定要关闭吗？")
    .then(() => {
      done();
    })
    .catch(() => {});
};
//商品信息
//修改表单
const Produt2 = reactive({
  productId: 0,
  batchId: "",
  productName: "",
  keepSafe: "",
  permission: "",
  firmName: "",
  full: 10,
  productClassId: "",
  images: "",
  creator: "",
  creationDate: "2025-02-27T07:22:54.402Z",
  updateor: "张三",
  updatedate: "2025-02-27T07:22:54.402Z",
});
//商品信息反填
const fan = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetProductDetail", {
      params: {
        BatchId: route.query.batchId,
      },
    })
    .then((res) => {
      Produt2.productId = res.data.data.productId;
      Produt2.batchId = res.data.data.batchId;
      Produt2.keepSafe = res.data.data.keepSafe;
      Produt2.permission = res.data.data.permission;
      Produt2.firmName = res.data.data.firmName;
      Produt2.full = res.data.data.full;
      Produt2.productClassId = res.data.data.productClassId;
      Produt2.images = res.data.data.images;
      Produt2.productName = res.data.data.productName;
      console.log(res.data.data.images);
    });
};
//养殖信息

//养殖添加
const Farm = reactive({
  batchNo: route.query.batchId,
  typeName: "",
  source: "",
  feedDays: "",
  feedBrand: "",
  feedPerson: "",
  outboundTime: "",
});
const AddFram = () => {
  KongaUrl.post("userwriter/api/rabbit/AddFrim", Farm).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage.success(res.data.message);
      vis1.value = false;
    } else {
      ElMessage.error(res.data.message);
    }
  });
};
//养殖反填
const Farmfan = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetFarmList", {
      params: {
        BatchNo: route.query.batchId,
      },
    })
    .then((res) => {
      Farm.typeName = res.data.data.typeName;
      Farm.source = res.data.data.source;
      Farm.feedDays = res.data.data.feedDays;
      Farm.feedBrand = res.data.data.feedBrand;
      Farm.feedPerson = res.data.data.feedPerson;
      Farm.outboundTime = res.data.data.outboundTime;
    });
};
// 自定义保健信息数组
const CustomHealthInfo = ref([
  {
    immuneId: 0,
    feedDays: null,
    batchNo: route.query.batchId,
    immuneMethod: "",
    immuneApproach: "",
    editMode: false,
  },
]);
const addRow = () => {
  CustomHealthInfo.value.push({
    immuneId: 0,
    feedDays: null,
    batchNo: route.query.batchId,
    immuneMethod: "",
    immuneApproach: "",
    editMode: true,
  });
};
// 保存按钮
const saveRow = (row: any) => {
  row.editMode = false;
};
// 修改按钮
const editRow = (row: any) => {
  row.editMode = true;
};
//删除
const deleteRow = (row: any) => {
  CustomHealthInfo.value = CustomHealthInfo.value.filter(
    (r) => r.immuneMethod !== row.immuneMethod
  );
};
// 取消按钮
const cancelEdit = (row: any) => {
  if (!row.feedingDays && !row.immuneApproach && !row.immuneMethod) {
    deleteRow(row);
  } else {
    row.editMode = false;
  }
};
// 删除按钮
// 板块信息按钮(单击养殖信息,屠宰信息,深加工信息等板块按钮时触发)
const PlateInformationButton = () => {
  console.log("板块信息按钮");
};

// 设置初始板块位置(刚进入页面时,默认板块为养殖信息板块)
const activeTab = ref("breedingInfo");
//企业信息
const Firm = reactive({
  batchId: route.query.batchId,
  farm: "",
  stock: "",
  principal: "",
  firmName: "",
  permission: "",
  start: "",
  address: "",
  intro: "",
});
const AddFiam = () => {
  KongaUrl.post("/user/api/rabbit/AddFirm", Firm).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage.success(res.data.message);
      vis2.value = false;
    } else {
      ElMessage.error(res.data.message);
    }
  });
};
const fanFiem = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetFirm", {
      params: {
        BatchId: route.query.batchId,
      },
    })
    .then((res) => {
      Firm.farm = res.data.data.farm;
      Firm.stock = res.data.data.stock;
      Firm.principal = res.data.data.principal;
      Firm.firmName = res.data.data.firmName;
      Firm.permission = res.data.data.permission;
      Firm.start = res.data.data.start;
      Firm.address = res.data.data.address;
      Firm.intro = res.data.data.intro;
    });
};
//供应商
const SetFarmingInformation2 = () => {
  vis3.value = true;
};
const handleAvatarSuccess1: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  Produt2.images = response;
  console.log(Produt2.images);
};

const handleAvatarSuccess2: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  aa.pic = response;
  AddPicA();
};
const supper = reactive({
  batchId: route.query.batchId,
  principal: "",
  team: "",
});
const AddSpuuer = () => {
  KongaUrl
    .post("/userwriter/api/rabbit/AddSupplier", supper)
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
        vis2.value = false;
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
const fansupper = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetSupplier", {
      params: {
        BatchId: route.query.batchId,
      },
    })
    .then((res) => {
      supper.principal = res.data.data.principal;
      supper.team = res.data.data.team;
    });
};
//屠宰信息
const Kill = reactive({
  batchId: route.query.batchId,
  getWeight: "",
  getTime: "",
  killTime: "",
});
//屠宰添加
const AddKill = () => {
  KongaUrl.post("/userwriter/api/rabbit/AddKill", Kill).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage.success(res.data.message);
      vis2.value = false;
    } else {
      ElMessage.error(res.data.message);
    }
  });
};
//反填
const fanKill = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetKill", {
      params: {
        BatchId: route.query.batchId,
      },
    })
    .then((res) => {
      Kill.batchId = res.data.data.batchId;
      Kill.getWeight = res.data.data.getWeight;
      Kill.getTime = res.data.data.getTime;
      Kill.killTime = res.data.data.killTime;
    });
};
//商品名称显示
const Shopinfo = <any>ref([]);
const ShopList = () => {
  KongaUrl
    .get("/user/api/rabbit/GetProductClass")
    .then((res) => {
      Shopinfo.value = res.data.data;
    });
};
//基本信息修改
const updateProduct = () => {
  axios
    .post("/userwriter/api/rabbit/UpdateProduct", {
      productId: Produt2.productId,
      batchId: Produt2.batchId,
      productName: Produt2.productName,
      keepSafe: Produt2.keepSafe,
      permission: Produt2.permission,
      firmName: Produt2.firmName,
      full: Produt2.full,
      productClassId: Produt2.productClassId,
      images: Produt2.images,
      creator: Produt2.creator,
      creationDate: Produt2.creationDate,
      updateor: Produt2.updateor,
      updatedate: Produt2.updatedate,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 300) {
        ElMessage.success(res.data.message);
        dialogVisible1.value = false;
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
//图片添加

const aa = reactive({
  batchId: route.query.batchId,
  picType: 0,
  pic: "",
});

//动检证
const Pic2 = reactive({
  batchId: route.query.batchId,
  picUrl: "",
});
//产检
const AddPic = () => {
  KongaUrl
    .post("/userwriter/api/rabbit/AddPicture", aa)
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
//产检反填
// const picfan = () => {
//   console.log(route.query.batchId);
//   axios
//     .get("https://localhost:44305/api/rabbit/GetPicture", {
//       params: {
//         BatchId: route.query.batchId,
//         picType: 0,
//       },
//     })
//     .then((res) => {});
// };
//产检修改
//基本信息修改
/* const updatePIc = () => {
  axios
    .put("https://localhost:44372/api/rabbit/UpdatePicture", {
      batchId: Pic1.batchId,
      pic: Pic1.pic,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 300) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
      }
    });
}; */
//动检证图片
const AddPicA = () => {
  KongaUrl
    .post("/userwriter/api/rabbit/AddAPicture", aa)
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
//
const picAfan = () => {
  console.log(route.query.batchId);
  KongaUrl
    .get("/user/api/rabbit/GetPICA", {
      params: {
        BatchId: route.query.batchId,
      },
    })
    .then((res) => {
      Pic2.picUrl = res.data.data.picUrl;
    });
};
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible6 = ref(false);

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible6.value = true;
};
/* //#region 导出溯源码板块

// 导出溯源码弹出对话框状态
const ExportTrace = ref(false);


const qrCodeUrl = ref("");

// 生成二维码

//#endregion

//#region 养殖信息板块

//#region 设置养殖信息
// 设置养殖信息弹出框状态
const SetFarmingInformationDialogVisible = ref(false);
// 设置养殖信息按钮
const SetFarmingInformation = () => {
  SetFarmingInformationDialogVisible.value = true;
};
interface SetFarmingRuleForm {
  breedingId: null;
  breedingType: string;
  source: string;
  feedingDays: null;
  feedBrand: string;
  principal: string;
  publicationDate: {
    year: null;
    month: null;
    day: null;
    dayOfWeek: null;
  };
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<SetFarmingRuleForm>({
  breedingId: null,
  breedingType: "",
  source: "",
  feedingDays: null,
  feedBrand: "",
  principal: "",
  publicationDate: {
    year: null,
    month: null,
    day: null,
    dayOfWeek: null,
  },
});

const rules = reactive<FormRules<SetFarmingRuleForm>>({
  breedingType: [{ required: true, message: "请输入品种", trigger: "blur" }],
  source: [{ required: true, message: "请输入来源", trigger: "blur" }],
  feedingDays: [{ required: true, message: "请输入饲养天数", trigger: "blur" }],
  feedBrand: [{ required: true, message: "请输入饲养品牌", trigger: "blur" }],
  principal: [{ required: true, message: "请输入饲养负责人", trigger: "blur" }],
  publicationDate: [
    {
      type: "date",
      required: true,
      message: "请选择出栏日期",
      trigger: "change",
    },
  ],
});
const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const SetFarmingsubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
//#endregion

//#region 设置养殖企业信息
// 设置养殖信息弹出框状态
const SetBreedingEnterpriseDialogVisible = ref(false);
// 设置养殖信息按钮
const SetBreedingEnterprise = () => {
  SetBreedingEnterpriseDialogVisible.value = true;
};
interface SetBreedingEnterpriseRuleForm {
  breedingId: null;
  breedingType: string;
  source: string;
  feedingDays: null;
  feedBrand: string;
  principal: string;
  publicationDate: {
    year: null;
    month: null;
    day: null;
    dayOfWeek: null;
  };
}

const SetBreedingEnterpriseruleForm = reactive<SetBreedingEnterpriseRuleForm>({
  breedingId: null,
  breedingType: "",
  source: "",
  feedingDays: null,
  feedBrand: "",
  principal: "",
  publicationDate: {
    year: null,
    month: null,
    day: null,
    dayOfWeek: null,
  },
});

const SetBreedingEnterpriserules = reactive<
  FormRules<SetBreedingEnterpriseRuleForm>
>({
  breedingType: [{ required: true, message: "请输入品种", trigger: "blur" }],
  source: [{ required: true, message: "请输入来源", trigger: "blur" }],
  feedingDays: [{ required: true, message: "请输入饲养天数", trigger: "blur" }],
  feedBrand: [{ required: true, message: "请输入饲养品牌", trigger: "blur" }],
  principal: [{ required: true, message: "请输入饲养负责人", trigger: "blur" }],
  publicationDate: [
    {
      type: "date",
      required: true,
      message: "请选择出栏日期",
      trigger: "change",
    },
  ],
});

const SetBreedingEnterprisesubmitForm = async (
  formEl: FormInstance | undefined
) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
//#endregion

//#endregion

//#region 养殖信息-保健信息板块
// 新增行按钮
const addRow = () => {
  CustomHealthInfo.value.push({
    healthInfoId: Date.now(),
    feedingDays: null,
    healthType: "",
    healthMethod: "",
    productBasicsId: null,
    editMode: true,
  });
};
// 保存按钮
const saveRow = (row: any) => {
  row.editMode = false;
};
// 取消按钮
const cancelEdit = (row: any) => {
  if (!row.feedingDays && !row.healthType && !row.healthMethod) {
    deleteRow(row);
  } else {
    row.editMode = false;
  }
};
// 修改按钮
const editRow = (row: any) => {
  row.editMode = true;
};
// 删除按钮
const deleteRow = (row: any) => {
  CustomHealthInfo.value = CustomHealthInfo.value.filter(
    (r) => r.healthInfoId !== row.healthInfoId
  );
};
//#endregion

// 实例化系统路由
const router = useRouter();
// 实例化当前页面路由
const route = useRoute();

// 商品详情信息
const ProductDetails = ref([
  {
    productBasicsDTO: {
      productBasicsId: "",
      productNameId: 1,
      productNamestring: "",
      productionbatch: "",
      expirationdate: 12,
      productionLicenseNumber: "",
      productionCompany: "",
      productPicture: "",
    },
    breedingDTO: {
      breedingId: 0,
      breedingType: "",
      source: "",
      feedingDays: 0,
      feedBrand: "",
      principal: "",
      publicationDate: "",
      productBasicsId: null,
    },
    healthInfoDTOs: [
      {
        healthInfoId: 0,
        feedingDays: null,
        healthType: "",
        healthMethod: "",
        productBasicsId: null,
      },
    ],
    imagePictureDTOs: [
      {
        imagePictureId: 0,
        workFlow: 0,
        workFlowName: "",
        imageType: 0,
        imageTypeName: "",
        imageURL: "",
        productBasicsId: null,
      },
    ],
    breedingCompanyDTO: {
      breedingCompanyId: 0,
      breedingCompanyName: "",
      principal: "",
      breedingNum: 0,
      productBasicsId: null,
    },
    slaughterDTO: {
      slaughterId: 0,
      slaughterBatch: "",
      weightFactory: 0,
      arrivalTtime: "",
      slaughterTime: "",
      productBasicsId: null,
    },
    slaughterCompanyDTO: {
      slaughterCompanyId: 0,
      slaughterCompanyName: "",
      createDate: "",
      province: "",
      city: "",
      county: "",
      companyProfile: "",
      productBasicsId: null,
    },
    deepProcessingDTO: {
      deepProcessingId: 0,
      teamGroup: "",
      principal: "",
      productBasicsId: null,
    },
    supplierDTOs: [
      {
        supplierId: 0,
        materialsType: "",
        productionBatchNo: "",
        imageURL: "",
        productBasicsId: null,
      },
    ],
    deepProcessingCompanyDTO: {
      deepProcessingCompanyId: 0,
      deepProcessingCompanyName: "",
      productionLicenseNo: "",
      productBasicsId: null,
    },
  },
]);

// 板块信息按钮(单击养殖信息,屠宰信息,深加工信息等板块按钮时触发)
const PlateInformationButton = () => {
  console.log("板块信息按钮");
};

// 设置初始板块位置(刚进入页面时,默认板块为养殖信息板块)
const activeTab = ref("breedingInfo");

// 自定义原料信息数组
const CustomMaterialInfo = ref([
  {
    supplierId: 0,
    materialsType: "",
    productionBatchNo: "",
    imageURL: "",
    productBasicsId: null,
  },
]);
// 自定义辅料信息数组
const CustomAccessoryInfo = ref([
  {
    supplierId: 0,
    materialsType: "",
    productionBatchNo: "",
    imageURL: "",
    productBasicsId: null,
  },
]);
// 自定义添加剂信息数组
const CustomAdditiveInfo = ref([
  {
    supplierId: 0,
    materialsType: "",
    productionBatchNo: "",
    imageURL: "",
    productBasicsId: null,
  },
]);
// 自定义包材信息数组
const CustomBagInfo = ref([
  {
    supplierId: 0,
    materialsType: "",
    productionBatchNo: "",
    imageURL: "",
    productBasicsId: null,
  },
]);
// 自定义保健信息数组
const CustomHealthInfo = ref([
  {
    healthInfoId: 0,
    feedingDays: null,
    healthType: "",
    healthMethod: "",
    productBasicsId: null,
    editMode: false,
  },
]);

// 查询商品详情信息请求
const QueryProductbasicDetailsById = () => {
  axios
    .get(
      "http://localhost:5163/api/ManagementRead/QueryProductbasicDetailsById",
      {
        params: {
          ProductBasicsId: route.query.productBasicsId,
        },
      }
    )
    .then((res) => {
      ProductDetails.value[0] = res.data.data;
      // 获取保健信息数组初始值()通过映射
      CustomHealthInfo.value = ProductDetails.value[0].healthInfoDTOs.map(
        (x) => {
          return {
            healthInfoId: x.healthInfoId,
            feedingDays: x.feedingDays,
            healthType: x.healthType,
            healthMethod: x.healthMethod,
            productBasicsId: x.productBasicsId,
            editMode: false,
          };
        }
      );
      console.log(CustomHealthInfo.value);
      // 分解供应商信息
      CustomMaterialInfo.value = ProductDetails.value[0].supplierDTOs.filter(
        (x) => x.materialsType == "原料"
      );
      CustomAccessoryInfo.value = ProductDetails.value[0].supplierDTOs.filter(
        (x) => x.materialsType == "辅料"
      );
      CustomAdditiveInfo.value = ProductDetails.value[0].supplierDTOs.filter(
        (x) => x.materialsType == "添加剂"
      );
      CustomBagInfo.value = ProductDetails.value[0].supplierDTOs.filter(
        (x) => x.materialsType == "包材"
      );
    });
};
 */
// 钩子函数
onMounted(() => {
  //QueryProductbasicDetailsById();
  fan();
  Farmfan();
  fanFiem();
  fanKill();
  fansupper();
  ShopList();
  // picfan();
  picAfan();
});
</script>